<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js coal">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>Slint Builtin Elements - Andrew&#x27;s Blog</title>


        <!-- Custom HTML head -->
        
        <meta name="description" content="Andrew Ryan&#x27;s Blog">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff" />

        <link rel="icon" href="../../favicon.svg">
        <link rel="shortcut icon" href="../../favicon.png">
        <link rel="stylesheet" href="../../css/variables.css">
        <link rel="stylesheet" href="../../css/general.css">
        <link rel="stylesheet" href="../../css/chrome.css">

        <!-- Fonts -->
        <link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
        <link rel="stylesheet" href="../../fonts/fonts.css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../../highlight.css">
        <link rel="stylesheet" href="../../tomorrow-night.css">
        <link rel="stylesheet" href="../../ayu-highlight.css">

        <!-- Custom theme stylesheets -->
        <link rel="stylesheet" href="../../src/style/custom.css">

        <!-- MathJax -->
        <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    </head>
    <body>
    <div id="body-container">
        <!-- Provide site root to javascript -->
        <script>
            var path_to_root = "../../";
            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "coal" : "coal";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script>
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script>
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
            if (theme === null || theme === undefined) { theme = default_theme; }
            var html = document.querySelector('html');
            html.classList.remove('no-js')
            html.classList.remove('coal')
            html.classList.add(theme);
            html.classList.add('js');
        </script>

        <!-- Hide / unhide sidebar before it is displayed -->
        <script>
            var html = document.querySelector('html');
            var sidebar = null;
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            } else {
                sidebar = 'hidden';
            }
            html.classList.remove('sidebar-visible');
            html.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="sidebar-scrollbox">
                <ol class="chapter"><li class="chapter-item affix "><a href="../../index.html">Andrew's Blog</a></li><li class="chapter-item "><a href="../../posts/linux/linux.html"><strong aria-hidden="true">1.</strong> Linux</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/linux/install_linux.html"><strong aria-hidden="true">1.1.</strong> install linux</a></li><li class="chapter-item "><a href="../../posts/linux/bash_profile.html"><strong aria-hidden="true">1.2.</strong> bash profile</a></li><li class="chapter-item "><a href="../../posts/linux/command_list.html"><strong aria-hidden="true">1.3.</strong> command list</a></li><li class="chapter-item "><a href="../../posts/linux/git_guide.html"><strong aria-hidden="true">1.4.</strong> git guide</a></li><li class="chapter-item "><a href="../../posts/linux/tar.html"><strong aria-hidden="true">1.5.</strong> tar</a></li><li class="chapter-item "><a href="../../posts/Linux/git_cheatsheet.html"><strong aria-hidden="true">1.6.</strong> Git Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/Linux/bash_cheatsheet.html"><strong aria-hidden="true">1.7.</strong> Bash Cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/macos/mac.html"><strong aria-hidden="true">2.</strong> MacOS</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/macos/macos_profiles.html"><strong aria-hidden="true">2.1.</strong> macos profiles</a></li><li class="chapter-item "><a href="../../posts/macos/macos_pwn_env_setup.html"><strong aria-hidden="true">2.2.</strong> macos pwn env setup</a></li></ol></li><li class="chapter-item "><a href="../../posts/swift/swift.html"><strong aria-hidden="true">3.</strong> Swift</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/swift/learn_swift.html"><strong aria-hidden="true">3.1.</strong> learn swift basics</a></li><li class="chapter-item "><a href="../../posts/swift/swift_extensions.html"><strong aria-hidden="true">3.2.</strong> Swift extensions</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_extension.html"><strong aria-hidden="true">3.3.</strong> SwiftUI extensions</a></li><li class="chapter-item "><a href="../../posts/swift/install_swift.html"><strong aria-hidden="true">3.4.</strong> install swift</a></li><li class="chapter-item "><a href="../../posts/swift/task_planner.html"><strong aria-hidden="true">3.5.</strong> implment task panner app with SwiftUI</a></li><li class="chapter-item "><a href="../../posts/swift/swift_cheat_sheet.html"><strong aria-hidden="true">3.6.</strong> Swift Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/swift/yinci_url.html"><strong aria-hidden="true">3.7.</strong> Personal privacy protocol</a></li><li class="chapter-item "><a href="../../posts/swift/swift_regular_exressions.html"><strong aria-hidden="true">3.8.</strong> Swift regular exressions</a></li><li class="chapter-item "><a href="../../posts/ios/how_to_create_beautiful_ios_charts_in_swift.html"><strong aria-hidden="true">3.9.</strong> How to Create Beautiful iOS Charts in Swift</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_source_code.html"><strong aria-hidden="true">3.10.</strong> SwiftUI source code</a></li><li class="chapter-item "><a href="../../posts/swift/use_swift_fetch_iciba_api.html"><strong aria-hidden="true">3.11.</strong> use swift fetch iciba API</a></li></ol></li><li class="chapter-item "><a href="../../posts/ios/ios.html"><strong aria-hidden="true">4.</strong> iOS</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ios/cocaposd_setup_and_install_for_ios_project.html"><strong aria-hidden="true">4.1.</strong> cocaposd setup and install for ios project</a></li><li class="chapter-item "><a href="../../posts/ios/swiftui_show_gif_image.html"><strong aria-hidden="true">4.2.</strong> SwiftUI show gif image</a></li><li class="chapter-item "><a href="../../posts/ios/implement_task_planner_app.html"><strong aria-hidden="true">4.3.</strong> implement Task planner App</a></li></ol></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c.html"><strong aria-hidden="true">5.</strong> Objective-C</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/objective_c/objective_c_cheat_sheet.html"><strong aria-hidden="true">5.1.</strong> Objective-C Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c_for_absolute_beginners_read_note.html"><strong aria-hidden="true">5.2.</strong> Objective-C Note</a></li></ol></li><li class="chapter-item "><a href="../../posts/dart/dart.html"><strong aria-hidden="true">6.</strong> Dart</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/dart/flutter.html"><strong aria-hidden="true">6.1.</strong> Flutter Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/dart/dart_cheat_sheet.html"><strong aria-hidden="true">6.2.</strong> Dart Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/flutter/flutter_dev_test.html"><strong aria-hidden="true">6.3.</strong> Flutter dev test</a></li></ol></li><li class="chapter-item expanded "><a href="../../posts/rust/rust.html"><strong aria-hidden="true">7.</strong> Rust</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/rust/offline_use_rust.html"><strong aria-hidden="true">7.1.</strong> Offline use rust</a></li><li class="chapter-item "><a href="../../posts/rust/rust_grammer.html"><strong aria-hidden="true">7.2.</strong> rust grammar</a></li><li class="chapter-item "><a href="../../posts/rust/pase_string_and_decimal_conversion.html"><strong aria-hidden="true">7.3.</strong> pase string and decimal conversion</a></li><li class="chapter-item "><a href="../../posts/rust/parse_types.html"><strong aria-hidden="true">7.4.</strong> rust types</a></li><li class="chapter-item "><a href="../../posts/rust/rust_life_cycle.html"><strong aria-hidden="true">7.5.</strong> Rust life cycle</a></li><li class="chapter-item "><a href="../../posts/rust/rust_generic.html"><strong aria-hidden="true">7.6.</strong> rust generics</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implment_matrix.html"><strong aria-hidden="true">7.7.</strong> Rust implement matrix</a></li><li class="chapter-item "><a href="../../posts/rust/rust_sort.html"><strong aria-hidden="true">7.8.</strong> Rust implement sort algorithms</a></li><li class="chapter-item "><a href="../../posts/rust/implement_aes_encryption.html"><strong aria-hidden="true">7.9.</strong> Rust implement AEC encryption and decryption</a></li><li class="chapter-item "><a href="../../posts/rust/implement_trie_data_structure.html"><strong aria-hidden="true">7.10.</strong> implement trie data structure</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_tree.html"><strong aria-hidden="true">7.11.</strong> implement tree data_structure</a></li><li class="chapter-item "><a href="../../posts/rust/list_dir.html"><strong aria-hidden="true">7.12.</strong> list dir</a></li><li class="chapter-item "><a href="../../posts/rust/fast_way_to_implment_object_trait.html"><strong aria-hidden="true">7.13.</strong> fast way to implment object trait</a></li><li class="chapter-item "><a href="../../posts/rust/compress_rust_binary_size.html"><strong aria-hidden="true">7.14.</strong> compress rust binary size</a></li><li class="chapter-item "><a href="../../posts/rust/implment_file_upload_backend.html"><strong aria-hidden="true">7.15.</strong> impliment file upload</a></li><li class="chapter-item "><a href="../../posts/rust/this_is_add_post_cli_implementation_in_rust.html"><strong aria-hidden="true">7.16.</strong> this is add_post cli implementation in rust</a></li><li class="chapter-item "><a href="../../posts/rust/use_rust_implment_a_copyclipbord_cli.html"><strong aria-hidden="true">7.17.</strong> Use rust implment a copyclipbord CLI</a></li><li class="chapter-item "><a href="../../posts/rust/sqlite_database_add_delete_update_show_in_rust.html"><strong aria-hidden="true">7.18.</strong> sqlite database add delete update show in rust</a></li><li class="chapter-item "><a href="../../posts/rust/implementing_tokio_joinhandle_for_wasm.html"><strong aria-hidden="true">7.19.</strong> Implementing tokio JoinHandle for wasm</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html"><strong aria-hidden="true">7.20.</strong> rust implement a crate for encode and decode brainfuck and ook</a></li><li class="chapter-item expanded "><a href="../../posts/rust/slint_builtin_elements.html" class="active"><strong aria-hidden="true">7.21.</strong> Slint Builtin Elements</a></li><li class="chapter-item "><a href="../../posts/rust/corporate_network_install_rust_on_windows.html"><strong aria-hidden="true">7.22.</strong> Corporate network install Rust on windows</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_file_how_to_judge_static_link_or_dynamic_link_in_macos.html"><strong aria-hidden="true">7.23.</strong> rust binary file how to judge static link or dynamic link in Macos</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_include_dir_and_get_contents.html"><strong aria-hidden="true">7.24.</strong> rust binary include dir and get contents</a></li><li class="chapter-item "><a href="../../posts/rust/how_to_create_yolov8_based_object_detection_web_service_using_python,_julia,_node.js,_javascript,_go_and_rust.html"><strong aria-hidden="true">7.25.</strong> How to create YOLOv8-based object detection web service using Python, Julia, Node.js, JavaScript, Go and Rust</a></li><li class="chapter-item "><a href="../../posts/rust/implment_builder_proc_macro_for_command_struct.html"><strong aria-hidden="true">7.26.</strong> implment Builder proc-macro for Command struct</a></li></ol></li><li class="chapter-item "><a href="../../posts/java/java.html"><strong aria-hidden="true">8.</strong> Java</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/java/java_grammar.html"><strong aria-hidden="true">8.1.</strong> java grammar and codewar</a></li><li class="chapter-item "><a href="../../posts/java/run_jar.html"><strong aria-hidden="true">8.2.</strong> java run .jar</a></li><li class="chapter-item "><a href="../../posts/java/java_pomxml_add_defaultgoal_to_build.html"><strong aria-hidden="true">8.3.</strong> Java pomxml add defaultGoal to build</a></li><li class="chapter-item "><a href="../../posts/java/java_set_mvn_mirror.html"><strong aria-hidden="true">8.4.</strong> Java set mvn mirror</a></li></ol></li><li class="chapter-item "><a href="../../posts/python/python.html"><strong aria-hidden="true">9.</strong> Python</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/python/convert_pesn.html"><strong aria-hidden="true">9.1.</strong> convert pesn</a></li><li class="chapter-item "><a href="../../posts/python/find_remove_dir.html"><strong aria-hidden="true">9.2.</strong> find and remove dir</a></li><li class="chapter-item "><a href="../../posts/python/timing_message.html"><strong aria-hidden="true">9.3.</strong> wechat send message</a></li><li class="chapter-item "><a href="../../posts/python/use_python_openpyxl_package_read_and_edit_excel_files.html"><strong aria-hidden="true">9.4.</strong> Use python openpyxl package read and edit excel files</a></li><li class="chapter-item "><a href="../../posts/python/sanctum_model_yaml.html"><strong aria-hidden="true">9.5.</strong> sanctum model yaml</a></li><li class="chapter-item "><a href="../../posts/python/how_to_detect_objects_on_images_using_the_yolov8_neural_network.html"><strong aria-hidden="true">9.6.</strong> How to detect objects on images using the YOLOv8 neural network</a></li><li class="chapter-item "><a href="../../posts/python/use_huggingface_model.html"><strong aria-hidden="true">9.7.</strong> use huggingface model</a></li></ol></li><li class="chapter-item "><a href="../../posts/go/go.html"><strong aria-hidden="true">10.</strong> Go</a></li><li class="chapter-item "><a href="../../posts/javascript/js.html"><strong aria-hidden="true">11.</strong> Javascript</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/javascript/js_tutorial.html"><strong aria-hidden="true">11.1.</strong> js tutorial</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_map.html"><strong aria-hidden="true">11.2.</strong> ja map</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_math.html"><strong aria-hidden="true">11.3.</strong> js math</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_object.html"><strong aria-hidden="true">11.4.</strong> js object</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_set.html"><strong aria-hidden="true">11.5.</strong> js set</a></li><li class="chapter-item "><a href="../../posts/javascript/single_thread_and_asynchronous.html"><strong aria-hidden="true">11.6.</strong> single thread and asynchronous</a></li><li class="chapter-item "><a href="../../posts/javascript/this.html"><strong aria-hidden="true">11.7.</strong> js this</a></li><li class="chapter-item "><a href="../../posts/javascript/js_implment_aes.html"><strong aria-hidden="true">11.8.</strong> js implment aes</a></li><li class="chapter-item "><a href="../../posts/javascript/getting_started_with_ajax.html"><strong aria-hidden="true">11.9.</strong> getting started with ajax</a></li><li class="chapter-item "><a href="../../posts/javascript/BinarySearchTree.html"><strong aria-hidden="true">11.10.</strong> binary search tree</a></li><li class="chapter-item "><a href="../../posts/javascript/goole_zx.html"><strong aria-hidden="true">11.11.</strong> goole zx</a></li><li class="chapter-item "><a href="../../posts/javascript/es6.html"><strong aria-hidden="true">11.12.</strong> es6</a></li></ol></li><li class="chapter-item "><a href="../../posts/ruby/ruby.html"><strong aria-hidden="true">12.</strong> Ruby</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ruby/rails_setup_env.html"><strong aria-hidden="true">12.1.</strong> ruby on rails setup environment</a></li><li class="chapter-item "><a href="../../posts/ruby/learn_ruby.html"><strong aria-hidden="true">12.2.</strong> learn ruby</a></li><li class="chapter-item "><a href="../../posts/ruby/ruby_note.html"><strong aria-hidden="true">12.3.</strong> Ruby Note</a></li><li class="chapter-item "><a href="../../posts/ruby/setup_ruby_for_ctf.html"><strong aria-hidden="true">12.4.</strong> Setup ruby for CTF</a></li></ol></li><li class="chapter-item "><a href="../../posts/react/react.html"><strong aria-hidden="true">13.</strong> React</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/react/react_life_cycle.html"><strong aria-hidden="true">13.1.</strong> react life cycle</a></li><li class="chapter-item "><a href="../../posts/react/react_router.html"><strong aria-hidden="true">13.2.</strong> react router</a></li><li class="chapter-item "><a href="../../posts/react/react_this.html"><strong aria-hidden="true">13.3.</strong> react this</a></li><li class="chapter-item "><a href="../../posts/react/react_interviw.html"><strong aria-hidden="true">13.4.</strong> react interview</a></li><li class="chapter-item "><a href="../../posts/react/important_react_interview.html"><strong aria-hidden="true">13.5.</strong> important react interview</a></li><li class="chapter-item "><a href="../../posts/react/react_quick_reference.html"><strong aria-hidden="true">13.6.</strong> react quick reference</a></li><li class="chapter-item "><a href="../../posts/react/redux_quick_reference.html"><strong aria-hidden="true">13.7.</strong> redux quick reference</a></li></ol></li><li class="chapter-item "><a href="../../posts/vue/vue.html"><strong aria-hidden="true">14.</strong> Vue</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/vue/vue_ajax.html"><strong aria-hidden="true">14.1.</strong> vue ajax</a></li></ol></li><li class="chapter-item "><a href="../../posts/angular/angular.html"><strong aria-hidden="true">15.</strong> Angular</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/angular/controller_communication.html"><strong aria-hidden="true">15.1.</strong> controller communication</a></li><li class="chapter-item "><a href="../../posts/angular/creating_custom_directives.html"><strong aria-hidden="true">15.2.</strong> creating custom directives</a></li><li class="chapter-item "><a href="../../posts/angular/directive_notes.html"><strong aria-hidden="true">15.3.</strong> directive notes</a></li><li class="chapter-item "><a href="../../posts/angular/directive_communication.html"><strong aria-hidden="true">15.4.</strong> directive communication</a></li><li class="chapter-item "><a href="../../posts/angular/post_params.html"><strong aria-hidden="true">15.5.</strong> post params</a></li><li class="chapter-item "><a href="../../posts/angular/read_json_angular.html"><strong aria-hidden="true">15.6.</strong> read json angular</a></li><li class="chapter-item "><a href="../../posts/angular/same_route_reload.html"><strong aria-hidden="true">15.7.</strong> same route reload</a></li></ol></li><li class="chapter-item "><a href="../../posts/css/css.html"><strong aria-hidden="true">16.</strong> Css</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/css/use_css_media.html"><strong aria-hidden="true">16.1.</strong> use css media</a></li></ol></li><li class="chapter-item "><a href="../../posts/php/php.html"><strong aria-hidden="true">17.</strong> Php</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/php/for_php_string_implment_some_extemtion_functions.html"><strong aria-hidden="true">17.1.</strong> for php string implment some extemtion functions</a></li><li class="chapter-item "><a href="../../posts/php/php_cheatsheet.html"><strong aria-hidden="true">17.2.</strong> PHP cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/windows/windows.html"><strong aria-hidden="true">18.</strong> Windows</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/windows/windows.html"><strong aria-hidden="true">18.1.</strong> Windows</a></li><li class="chapter-item "><a href="../../posts/windows/windows10_use_powershell_dedup_redundent_path.html"><strong aria-hidden="true">18.2.</strong> Windows10 use PowerShell dedup redundent PATH</a></li></ol></li><li class="chapter-item "><a href="../../posts/leetcode/leetcode.html"><strong aria-hidden="true">19.</strong> Leetcode</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/leetcode/rust_leetcode.html"><strong aria-hidden="true">19.1.</strong> rust leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_codewar.html"><strong aria-hidden="true">19.2.</strong> rust codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/swift_codewar.html"><strong aria-hidden="true">19.3.</strong> swift codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/js_leetcode.html"><strong aria-hidden="true">19.4.</strong> js leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/java_leetcode.html"><strong aria-hidden="true">19.5.</strong> java leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_huawei.html"><strong aria-hidden="true">19.6.</strong> huawei test</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_utils.html"><strong aria-hidden="true">19.7.</strong> rust common functions</a></li><li class="chapter-item "><a href="../../posts/leetcode/olympiad_training.html"><strong aria-hidden="true">19.8.</strong> Computer olympiad training</a></li></ol></li><li class="chapter-item "><a href="../../posts/ctf/CTF.html"><strong aria-hidden="true">20.</strong> CTF</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ctf/CTF_Note.html"><strong aria-hidden="true">20.1.</strong> CTF Note</a></li><li class="chapter-item "><a href="../../posts/ctf/0.1_Web.html"><strong aria-hidden="true">20.2.</strong> Web</a></li><li class="chapter-item "><a href="../../posts/ctf/4.1_Misc.html"><strong aria-hidden="true">20.3.</strong> Misc</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">20.4.</strong> PWN</a></li><li class="chapter-item "><a href="../../posts/ctf/3.1_Crypto.html"><strong aria-hidden="true">20.5.</strong> Crypto</a></li><li class="chapter-item "><a href="../../posts/ctf/3.4_RSA_note.html"><strong aria-hidden="true">20.6.</strong> Rsa attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.5_Base64.html"><strong aria-hidden="true">20.7.</strong> Base64</a></li><li class="chapter-item "><a href="../../posts/ctf/0.0_SQL Injection Cheatsheet.html"><strong aria-hidden="true">20.8.</strong> SQL Injection Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/1.1_SQL_injection.html"><strong aria-hidden="true">20.9.</strong> SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.2_SQL_injection_UNION_attacks.html"><strong aria-hidden="true">20.10.</strong> SQL Injection UNION attacks</a></li><li class="chapter-item "><a href="../../posts/ctf/1.3_Blind SQL injection.html"><strong aria-hidden="true">20.11.</strong> Blind SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.4_Code Injection.html"><strong aria-hidden="true">20.12.</strong> Code Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.5_SSRF.html"><strong aria-hidden="true">20.13.</strong> SSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.6_OS command injection.html"><strong aria-hidden="true">20.14.</strong> OS command injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.7_Local file inclusion.html"><strong aria-hidden="true">20.15.</strong> Local file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.8_Remote file inclusion.html"><strong aria-hidden="true">20.16.</strong> Remote file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.9_CSRFm.html"><strong aria-hidden="true">20.17.</strong> CSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.10_NoSQL injection.html"><strong aria-hidden="true">20.18.</strong> NoSQL injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.11_JSON injection.html"><strong aria-hidden="true">20.19.</strong> JSON injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.12_CTF_Web_SQL_Note.html"><strong aria-hidden="true">20.20.</strong> CTF Web SQL Note</a></li><li class="chapter-item "><a href="../../posts/ctf/2.1_XXE.html"><strong aria-hidden="true">20.21.</strong> XXE</a></li><li class="chapter-item "><a href="../../posts/ctf/2.2_XSS.html"><strong aria-hidden="true">20.22.</strong> XSS</a></li><li class="chapter-item "><a href="../../posts/ctf/2.3_Upload File.html"><strong aria-hidden="true">20.23.</strong> Upload File</a></li><li class="chapter-item "><a href="../../posts/ctf/2.4_serialize_unserialize.html"><strong aria-hidden="true">20.24.</strong> serialize unserialize</a></li><li class="chapter-item "><a href="../../posts/ctf/2.5_Race condition.html"><strong aria-hidden="true">20.25.</strong> Race condition</a></li><li class="chapter-item "><a href="../../posts/ctf/zip_plain_text_attack.html"><strong aria-hidden="true">20.26.</strong> Zip plain text attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.3_pwn HCTF2016 brop.html"><strong aria-hidden="true">20.27.</strong> pwn HCTF2016 brop</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_patch_defense_skill.html"><strong aria-hidden="true">20.28.</strong> PWN Patch defense skill</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_stack_overflow.html"><strong aria-hidden="true">20.29.</strong> PWN stack overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_heap_overflow.html"><strong aria-hidden="true">20.30.</strong> PWN heap overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_format_string_vulnerability.html"><strong aria-hidden="true">20.31.</strong> PWN Format String Vulnerability</a></li><li class="chapter-item "><a href="../../posts/ctf/kali_linux_tutorials.html"><strong aria-hidden="true">20.32.</strong> Kali linux tutorials</a></li><li class="chapter-item "><a href="../../posts/ctf/google_dorks_2023_lists.html"><strong aria-hidden="true">20.33.</strong> Google Dorks 2023 Lists</a></li><li class="chapter-item "><a href="../../posts/ctf/dvwa_writeup.html"><strong aria-hidden="true">20.34.</strong> DVWA WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/bwapp_writeup.html"><strong aria-hidden="true">20.35.</strong> bWAPP WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/sqlilabs_writeup.html"><strong aria-hidden="true">20.36.</strong> sqlilabs WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/pwnable_kr_challenge.html"><strong aria-hidden="true">20.37.</strong> Solutions for pwnable.kr</a></li><li class="chapter-item "><a href="../../posts/ctf/the_periodic_table.html"><strong aria-hidden="true">20.38.</strong> The Periodic Table</a></li><li class="chapter-item "><a href="../../posts/ctf/pwntools_cheatsheet.html"><strong aria-hidden="true">20.39.</strong> Pwntools Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/gdb_cheatsheet.html"><strong aria-hidden="true">20.40.</strong> GDB Cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/iltes/iltes.html"><strong aria-hidden="true">21.</strong> ILTES</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/iltes/iltes_writing.html"><strong aria-hidden="true">21.1.</strong> ILTES Writing</a></li></ol></li></ol>
            </div>
            <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
        </nav>

        <!-- Track and set sidebar scroll position -->
        <script>
            var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
            sidebarScrollbox.addEventListener('click', function(e) {
                if (e.target.tagName === 'A') {
                    sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
                }
            }, { passive: true });
            var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
            sessionStorage.removeItem('sidebar-scroll');
            if (sidebarScrollTop) {
                // preserve sidebar scroll position when navigating via links within sidebar
                sidebarScrollbox.scrollTop = sidebarScrollTop;
            } else {
                // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
                var activeSection = document.querySelector('#sidebar .active');
                if (activeSection) {
                    activeSection.scrollIntoView({ block: 'center' });
                }
            }
        </script>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                                <div id="menu-bar-hover-placeholder"></div>
                <div id="menu-bar" class="menu-bar sticky">
                    <div class="left-buttons">
                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                            <i class="fa fa-bars"></i>
                        </button>
                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                            <i class="fa fa-paint-brush"></i>
                        </button>
                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                        </ul>
                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>

                    <h1 class="menu-title">Andrew&#x27;s Blog</h1>

                    <div class="right-buttons">
                        <a href="https://gitee.com/dnrops/dnrops" title="Git repository" aria-label="Git repository">
                            <i id="git-repository-button" class="fa fa-github"></i>
                        </a>

                    </div>
                </div>

                <div id="search-wrapper" class="hidden">
                    <form id="searchbar-outer" class="searchbar-outer">
                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
                    </form>
                    <div id="searchresults-outer" class="searchresults-outer hidden">
                        <div id="searchresults-header" class="searchresults-header"></div>
                        <ul id="searchresults">
                        </ul>
                    </div>
                </div>

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script>
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <h1 id="slint-builtin-elements"><a class="header" href="#slint-builtin-elements">Slint Builtin Elements</a></h1>
<p style="display:flex;
    align-items: center;
    justify-content: end;
">Pub Date: 2023-08-20</p>
<h2 id="common-properties"><a class="header" href="#common-properties">Common properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#common-properties" title="Permalink to this heading"></a></a></h2>
<h3 id="geometry"><a class="header" href="#geometry">Geometry<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#geometry" title="Permalink to this heading"></a></a></h3>
<p>These properties are valid on all visible items:</p>
<ul>
<li><strong><code>width</code></strong> and <strong><code>height</code></strong> (<em>in</em> <em>length</em>): The size of the element. When set, this overrides the default size.</li>
<li><strong><code>x</code></strong> and <strong><code>y</code></strong> (<em>in</em> <em>length</em>): The position of the element relative to its parent.</li>
<li><strong><code>z</code></strong> (<em>in</em> <em>float</em>): Allows to specify a different order to stack the items with its siblings. (default value: 0)</li>
</ul>
<h3 id="layout"><a class="header" href="#layout">Layout<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#layout" title="Permalink to this heading"></a></a></h3>
<p>These properties are valid on all visible items and can be used to specify constraints when used in layouts:</p>
<ul>
<li><strong><code>col</code></strong>, <strong><code>row</code></strong>, <strong><code>colspan</code></strong>, <strong><code>rowspan</code></strong> (<em>in</em> <em>int</em>): See <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#gridlayout"><code>GridLayout</code></a>.</li>
<li><strong><code>horizontal-stretch</code></strong> and <strong><code>vertical-stretch</code></strong> (<em>in-out</em> <em>float</em>): Specify how much relative space these elements are stretching in a layout. When 0, this means that the elements won’t be stretched unless all elements are 0. Builtin widgets have a value of either 0 or 1.</li>
<li><strong><code>max-width</code></strong> and <strong><code>max-height</code></strong> (<em>in</em> <em>length</em>): The maximum size of an element</li>
<li><strong><code>min-width</code></strong> and <strong><code>min-height</code></strong> (<em>in</em> <em>length</em>): The minimum size of an element</li>
<li><strong><code>preferred-width</code></strong> and <strong><code>preferred-height</code></strong> (<em>in</em> <em>length</em>): The preferred size of an element</li>
</ul>
<h3 id="miscellaneous"><a class="header" href="#miscellaneous">Miscellaneous<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#miscellaneous" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>cache-rendering-hint</code></strong> (<em>in</em> <em>bool</em>): When set to <code>true</code>, this provides a hint to the renderer to cache the contents of the element and all the children into an intermediate cached layer. For complex sub-trees that rarely change this may speed up the rendering, at the expense of increased memory consumption. Not all rendering backends support this, so this is merely a hint. (default value: <code>false</code>)</li>
<li><strong><code>dialog-button-role</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#dialogbuttonrole"><code>DialogButtonRole</code></a></em>): Specify that this is a button in a <code>Dialog</code>.</li>
<li><strong><code>opacity</code></strong> (<em>in</em> <em>float</em>): A value between 0 and 1 (or a percentage) that is used to draw the element and its children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. (default value: 1)</li>
<li><strong><code>visible</code></strong> (<em>in</em> <em>bool</em>): When set to <code>false</code>, the element and all his children won’t be drawn and not react to mouse input (default value: <code>true</code>)</li>
</ul>
<h3 id="accessibility"><a class="header" href="#accessibility">Accessibility<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#accessibility" title="Permalink to this heading"></a></a></h3>
<p>Use the following <code>accessible-</code> properties to make your items interact well with software like screen readers, braille terminals and other software to make your application accessible.</p>
<ul>
<li><strong><code>accessible-role</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#accessiblerole"><code>AccessibleRole</code></a></em>): The role of the element. This property is mandatory to be able to use any other accessible properties. It should be set to a constant value. (default value: <code>none</code> for most elements, but <code>text</code> for the Text element)</li>
<li><strong><code>accessible-checkable</code></strong> (<em>in</em> <em>bool</em>): Whether the element is can be checked or not.</li>
<li><strong><code>accessible-checked</code></strong> (<em>in</em> <em>bool</em>): Whether the element is checked or not. This maps to the “checked” state of checkboxes, radio buttons, and other widgets.</li>
<li><strong><code>accessible-description</code></strong> (<em>in</em> <em>string</em>): The description for the current element.</li>
<li><strong><code>accessible-has-focus</code></strong> (<em>in</em> <em>bool</em>): Set to true when the current element currently has the focus.</li>
<li><strong><code>accessible-label</code></strong> (<em>in</em> <em>string</em>): The label for an interactive element. (default value: empty for most elements, or the value of the <code>text</code> property for Text elements)</li>
<li><strong><code>accessible-value-maximum</code></strong> (<em>in</em> <em>float</em>): The maximum value of the item. This is used for example by spin boxes.</li>
<li><strong><code>accessible-value-minimum</code></strong> (<em>in</em> <em>float</em>): The minimum value of the item.</li>
<li><strong><code>accessible-value-step</code></strong> (<em>in</em> <em>float</em>) The smallest increment or decrement by which the current value can change. This corresponds to the step by which a handle on a slider can be dragged.</li>
<li><strong><code>accessible-value</code></strong> (<em>in</em> <em>string</em>): The current value of the item.</li>
</ul>
<h3 id="drop-shadows"><a class="header" href="#drop-shadows">Drop Shadows<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#drop-shadows" title="Permalink to this heading"></a></a></h3>
<p>To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of an element, it’s possible to set the following <code>drop-shadow</code> properties:</p>
<ul>
<li><strong><code>drop-shadow-blur</code></strong> (<em>in</em> <em>length</em>): The radius of the shadow that also describes the level of blur applied to the shadow. Negative values are ignored and zero means no blur. (default value: 0)</li>
<li><strong><code>drop-shadow-color</code></strong> (<em>in</em> <em>color</em>): The base color of the shadow to use. Typically that color is the starting color of a gradient that fades into transparency.</li>
<li><strong><code>drop-shadow-offset-x</code></strong> and <strong><code>drop-shadow-offset-y</code></strong> (<em>in</em> <em>length</em>): The horizontal and vertical distance of the shadow from the element’s frame. A negative value places the shadow left / above of the element.</li>
</ul>
<p>The <code>drop-shadow</code> effect is supported for <code>Rectangle</code> elements.</p>
<h2 id="dialog"><a class="header" href="#dialog"><code>Dialog</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#dialog" title="Permalink to this heading"></a></a></h2>
<p>Dialog is like a window, but it has buttons that are automatically laid out.</p>
<p>A Dialog should have one main element as child, that isn’t a button. The dialog can have any number of <code>StandardButton</code> widgets or other buttons with the <code>dialog-button-role</code> property. The buttons will be placed in an order that depends on the target platform at run-time.</p>
<p>The <code>kind</code> property of the <code>StandardButton</code>s and the <code>dialog-button-role</code> properties need to be set to a constant value, it can’t be an arbitrary variable expression. There can’t be several <code>StandardButton</code>s of the same kind.</p>
<p>A callback <code>&lt;kind&gt;_clicked</code> is automatically added for each <code>StandardButton</code> which doesn’t have an explicit callback handler, so it can be handled from the native code: For example if there is a button of kind <code>cancel</code>, a <code>cancel_clicked</code> callback will be added.</p>
<h3 id="properties"><a class="header" href="#properties">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#properties" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>icon</code></strong> (<em>in</em> <em>image</em>): The window icon shown in the title bar or the task bar on window managers supporting it.</li>
<li><strong><code>title</code></strong> (<em>in</em> <em>string</em>): The window title that is shown in the title bar.</li>
</ul>
<h3 id="example"><a class="header" href="#example">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#example" title="Permalink to this heading"></a></a></h3>
<pre><code>import { StandardButton, Button } from &quot;std-widgets.slint&quot;;
export component Example inherits Dialog {
    Text {
      text: &quot;This is a dialog box&quot;;
    }
    StandardButton { kind: ok; }
    StandardButton { kind: cancel; }
    Button {
      text: &quot;More Info&quot;;
      dialog-button-role: action;
    }
}
</code></pre>
<h2 id="flickable"><a class="header" href="#flickable"><code>Flickable</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#flickable" title="Permalink to this heading"></a></a></h2>
<p>The <code>Flickable</code> is a low-level element that is the base for scrollable widgets, such as the <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/widgets.html#scrollview"><code>ScrollView</code></a>. When the <code>viewport-width</code> or the <code>viewport-height</code> is greater than the parent’s <code>width</code> or <code>height</code> respectively, the element becomes scrollable. Note that the <code>Flickable</code> doesn’t create a scrollbar. When unset, the <code>viewport-width</code> and <code>viewport-height</code> are calculated automatically based on the <code>Flickable</code>’s children. This isn’t the case when using a <code>for</code> loop to populate the elements. This is a bug tracked in issue [#407]((https://github.com/slint-ui/slint/issues/407). The maximum and preferred size of the <code>Flickable</code> are based on the viewport.</p>
<p>When not part of a layout, its width or height defaults to 100% of the parent element when not specified.</p>
<h3 id="properties-1"><a class="header" href="#properties-1">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id1" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>interactive</code></strong> (<em>in</em> <em>bool</em>): When true, the viewport can be scrolled by clicking on it and dragging it with the cursor. (default value: true)</li>
<li><strong><code>viewport-height</code></strong>, <strong><code>viewport-width</code></strong> (<em>in</em> <em>length</em>): The total size of the scrollable element.</li>
<li><strong><code>viewport-x</code></strong>, <strong><code>viewport-y</code></strong> (<em>in</em> <em>length</em>): The position of the scrollable element relative to the <code>Flickable</code>. This is usually a negative value.</li>
</ul>
<h3 id="example-1"><a class="header" href="#example-1">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id2" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 270px;
    height: 100px;

    Flickable {
        viewport-height: 300px;
        Text {
            x:0;
            y: 150px;
            text: &quot;This is some text that you have to scroll to see&quot;;
        }
    }
}
</code></pre>
<h2 id="focusscope"><a class="header" href="#focusscope"><code>FocusScope</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#focusscope" title="Permalink to this heading"></a></a></h2>
<p>The <code>FocusScope</code> exposes callbacks to intercept key events. Note that <code>FocusScope</code> will only invoke them when it <code>has-focus</code>.</p>
<p>The <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a> has a text property, which is a character of the key entered. When a non-printable key is pressed, the character will be either a control character, or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/namespaces.html#key"><code>Key</code></a> namespace</p>
<h3 id="properties-2"><a class="header" href="#properties-2">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id3" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>has-focus</code></strong> (<em>out</em> <em>bool</em>): Is <code>true</code> when the element has keyboard focus.</li>
</ul>
<h3 id="functions"><a class="header" href="#functions">Functions<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#functions" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>focus()</code></strong>  Call this function to transfer keyboard focus to this <code>FocusScope</code>, to receive future <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a>s.</li>
</ul>
<h3 id="callbacks"><a class="header" href="#callbacks">Callbacks<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#callbacks" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>key-pressed(</code><em><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a></em><code>) -&gt; </code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#eventresult"><code>EventResult</code></a></strong>: Invoked when a key is pressed, the argument is a <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a> struct.</li>
<li><strong><code>key-released(</code><em><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a></em><code>) -&gt; </code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#eventresult"><code>EventResult</code></a></strong>: Invoked when a key is released, the argument is a <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a> struct.</li>
</ul>
<h3 id="example-2"><a class="header" href="#example-2">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id4" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 100px;
    height: 100px;
    forward-focus: my-key-handler;
    my-key-handler := FocusScope {
        key-pressed(event) =&gt; {
            debug(event.text);
            if (event.modifiers.control) {
                debug(&quot;control was pressed during this event&quot;);
            }
            if (event.text == Key.Escape) {
                debug(&quot;Esc key was pressed&quot;)
            }
            accept
        }
    }
}
</code></pre>
<h2 id="gridlayout"><a class="header" href="#gridlayout"><code>GridLayout</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#gridlayout" title="Permalink to this heading"></a></a></h2>
<p><code>GridLayout</code> places its children in a grid. <code>GridLayout</code> adds properties to each child: <code>col</code>, <code>row</code>, <code>colspan</code>, <code>rowspan</code>. You can control the position of children with <code>col</code> and <code>row</code>. If <code>col</code> or <code>row</code> aren’t specified, they are automatically computed such that the item is next to the previous item, in the same row. Alternatively, the item can be put in a <code>Row</code> element.</p>
<h3 id="properties-3"><a class="header" href="#properties-3">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id5" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>spacing</code></strong> (<em>in</em> <em>length</em>): The distance between the elements in the layout.</li>
<li><strong><code>padding</code></strong> (<em>in</em> <em>length</em>): The padding within the layout.</li>
<li><strong><code>padding-left</code></strong>, <strong><code>padding-right</code></strong>, <strong><code>padding-top</code></strong> and <strong><code>padding-bottom</code></strong> (<em>in</em> <em>length</em>): Set these properties to override the padding on specific sides.</li>
</ul>
<h3 id="examples"><a class="header" href="#examples">Examples<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#examples" title="Permalink to this heading"></a></a></h3>
<p>This example uses the <code>Row</code> element:</p>
<pre><code>export component Foo inherits Window {
    width: 200px;
    height: 200px;
    GridLayout {
        spacing: 5px;
        Row {
            Rectangle { background: red; }
            Rectangle { background: blue; }
        }
        Row {
            Rectangle { background: yellow; }
            Rectangle { background: green; }
        }
    }
}
</code></pre>
<p>This example uses the <code>col</code> and <code>row</code> properties</p>
<pre><code>export component Foo inherits Window {
    width: 200px;
    height: 150px;
    GridLayout {
        Rectangle { background: red; }
        Rectangle { background: blue; }
        Rectangle { background: yellow; row: 1; }
        Rectangle { background: green; }
        Rectangle { background: black; col: 2; row: 0; }
    }
}
</code></pre>
<h2 id="image"><a class="header" href="#image"><code>Image</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#image" title="Permalink to this heading"></a></a></h2>
<p>An <code>Image</code> can be used to represent an image loaded from a file.</p>
<h3 id="properties-4"><a class="header" href="#properties-4">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id6" title="Permalink to this heading"></a></a></h3>
<ul>
<li>
<p><strong><code>colorize</code></strong> (<em>in</em> <em>brush</em>): When set, the image is used as an alpha mask and is drawn in the given color (or with the gradient).</p>
</li>
<li>
<p><strong><code>image-fit</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#imagefit"><code>ImageFit</code></a></em>): Specifies how the source image shall be fit into the image element. (default value: <code>contain</code> when the <code>Image</code> element is part of a layout, <code>fill</code> otherwise)</p>
</li>
<li>
<p><strong><code>image-rendering</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#imagerendering"><code>ImageRendering</code></a></em>): Specifies how the source image will be scaled. (default value: <code>smooth</code>)</p>
</li>
<li>
<p><strong><code>rotation-angle</code></strong> (<em>in</em> <em>angle</em>), <strong><code>rotation-origin-x</code></strong> (<em>in</em> <em>length</em>), <strong><code>rotation-origin-y</code></strong> (<em>in</em> <em>length</em>): Rotates the image by the given angle around the specified origin point. The default origin point is the center of the element. When these properties are set, the <code>Image</code> can’t have children.</p>
</li>
<li>
<p><strong><code>source</code></strong> (<em>in</em> <em>image</em>): The image to load. Use the <code>@image-url(&quot;...&quot;)</code> macro to specify the location of the image.</p>
</li>
<li>
<p><strong><code>source-clip-x</code></strong>, <strong><code>source-clip-y</code></strong>, <strong><code>source-clip-width</code></strong>, <strong><code>source-clip-height</code></strong> (<em>in</em> <em>int</em>): Properties in source image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:</p>
<div class="table-wrapper"><table><thead><tr><th>Property</th><th>Default Binding</th></tr></thead><tbody>
<tr><td><code>source-clip-x</code></td><td><code>0</code></td></tr>
<tr><td><code>source-clip-y</code></td><td><code>0</code></td></tr>
<tr><td><code>source-clip-width</code></td><td><code>source.width - source-clip-x</code></td></tr>
<tr><td><code>source-clip-height</code></td><td><code>source.height - source-clip-y</code></td></tr>
</tbody></table>
</div></li>
<li>
<p><strong><code>width</code></strong>, <strong><code>height</code></strong> (<em>in</em> <em>length</em>): The width and height of the image as it appears on the screen.The default values are the sizes provided by the <strong><code>source</code></strong> image. If the <code>Image</code> is <strong>not</strong> in a layout and only <strong>one</strong> of the two sizes are specified, then the other defaults to the specified value scaled according to the aspect ratio of the <strong><code>source</code></strong> image.</p>
</li>
</ul>
<h3 id="example-3"><a class="header" href="#example-3">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id7" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 100px;
    height: 100px;
    VerticalLayout {
        Image {
            source: @image-url(&quot;https://slint-ui.com/logo/slint-logo-full-light.svg&quot;);
            // image-fit default is `contain` when in layout, preserving aspect ratio
        }
        Image {
            source: @image-url(&quot;https://slint-ui.com/logo/slint-logo-full-light.svg&quot;);
            colorize: red;
        }
    }
}
</code></pre>
<p>Scaled while preserving the aspect ratio:</p>
<pre><code>export component Example inherits Window {
    width: 100px;
    height: 150px;
    VerticalLayout {
        Image {
            source: @image-url(&quot;https://slint-ui.com/logo/slint-logo-full-light.svg&quot;);
            width: 100px;
            // implicit default, preserving aspect ratio:
            // height: self.width * natural_height / natural_width;
        }
    }
}
</code></pre>
<h2 id="path"><a class="header" href="#path"><code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#path" title="Permalink to this heading"></a></a></h2>
<p>The <code>Path</code> element allows rendering a generic shape, composed of different geometric commands. A path shape can be filled and outlined.</p>
<p>When not part of a layout, its width or height defaults to 100% of the parent element when not specified.</p>
<p>A path can be defined in two different ways:</p>
<ul>
<li>Using SVG path commands as a string</li>
<li>Using path command elements in <code>.slint</code> markup.</li>
</ul>
<p>The coordinates used in the geometric commands are within the imaginary coordinate system of the path. When rendering on the screen, the shape is drawn relative to the <code>x</code> and <code>y</code> properties. If the <code>width</code> and <code>height</code> properties are non-zero, then the entire shape is fit into these bounds - by scaling accordingly.</p>
<h3 id="common-path-properties"><a class="header" href="#common-path-properties">Common Path Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#common-path-properties" title="Permalink to this heading"></a></a></h3>
<ul>
<li>
<p><strong><code>fill</code></strong> (<em>in</em> <em>brush</em>): The color for filling the shape of the path.</p>
</li>
<li>
<p><strong><code>fill-rule</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#fillrule"><code>FillRule</code></a></em>): The fill rule to use for the path. (default value: <code>nonzero</code>)</p>
</li>
<li>
<p><strong><code>stroke</code></strong> (<em>in</em> <em>brush</em>): The color for drawing the outline of the path.</p>
</li>
<li>
<p><strong><code>stroke-width</code></strong> (<em>in</em> <em>length</em>): The width of the outline.</p>
</li>
<li>
<p><strong><code>width</code></strong> (<em>in</em> <em>length</em>): If non-zero, the path will be scaled to fit into the specified width.</p>
</li>
<li>
<p><strong><code>height</code></strong> (<em>in</em> <em>length</em>): If non-zero, the path will be scaled to fit into the specified height.</p>
</li>
<li>
<p><strong><code>viewbox-x</code></strong>/<strong><code>viewbox-y</code></strong>/<strong><code>viewbox-width</code></strong>/<strong><code>viewbox-height</code></strong> (<em>in</em> <em>float</em>) These four properties allow defining the position and size of the viewport of the path in path coordinates.</p>
<p>If the <code>viewbox-width</code> or <code>viewbox-height</code> is less or equal than zero, the viewbox properties are ignored and instead the bounding rectangle of all path elements is used to define the view port.</p>
</li>
<li>
<p><strong><code>clip</code></strong> (<em>in</em> <em>bool</em>): By default, when a path has a view box defined and the elements render outside of it, they are still rendered. When this property is set to <code>true</code>, then rendering will be clipped at the boundaries of the view box. This property must be a literal <code>true</code> or <code>false</code> (default value: <code>false</code>)</p>
</li>
</ul>
<h4 id="path-using-svg-commands"><a class="header" href="#path-using-svg-commands">Path Using SVG commands<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#path-using-svg-commands" title="Permalink to this heading"></a></a></h4>
<p>SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG paths are composed using <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands">commands</a>, which in turn are written in a string. In <code>.slint</code> the path commands are provided to the <code>commands</code> property. The following example renders a shape consists of an arc and a rectangle, composed of <code>line-to</code>, <code>move-to</code> and <code>arc</code> commands:</p>
<pre><code>export component Example inherits Path {
    width: 100px;
    height: 100px;
    commands: &quot;M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z&quot;;
    stroke: red;
    stroke-width: 1px;
}
</code></pre>
<p>The commands are provided in a property:</p>
<ul>
<li><strong><code>commands</code></strong> (<em>in</em> <em>string</em>): A string providing the commands according to the SVG path specification.</li>
</ul>
<h4 id="path-using-svg-path-elements"><a class="header" href="#path-using-svg-path-elements">Path Using SVG Path Elements<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#path-using-svg-path-elements" title="Permalink to this heading"></a></a></h4>
<p>The shape of the path can also be described using elements that resemble the SVG path commands but use the <code>.slint</code> markup syntax. The earlier example using SVG commands can also be written like that:</p>
<pre><code>export component Example inherits Path {
    width: 100px;
    height: 100px;
    stroke: blue;
    stroke-width: 1px;

    MoveTo {
        x: 0;
        y: 0;
    }
    LineTo {
        x: 0;
        y: 100;
    }
    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: 100;
        y: 100;
    }
    LineTo {
        x: 100;
        y: 0;
    }
    Close {
    }
}
</code></pre>
<p>Note how the coordinates of the path elements don’t use units - they operate within the imaginary coordinate system of the scalable path.</p>
<h5 id="moveto-sub-element-for-path"><a class="header" href="#moveto-sub-element-for-path"><code>MoveTo</code> Sub-element for <code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#moveto-sub-element-for-path" title="Permalink to this heading"></a></a></h5>
<p>The <code>MoveTo</code> sub-element closes the current sub-path, if present, and moves the current point to the location specified by the <code>x</code> and <code>y</code> properties. Subsequent elements such as <code>LineTo</code> will use this new position as their starting point, therefore this starts a new sub-path.</p>
<h6 id="properties-5"><a class="header" href="#properties-5">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id8" title="Permalink to this heading"></a></a></h6>
<ul>
<li><strong><code>x</code></strong> (<em>in</em> <em>float</em>): The x position of the new current point.</li>
<li><strong><code>y</code></strong> (<em>in</em> <em>float</em>): The y position of the new current point.</li>
</ul>
<h5 id="lineto-sub-element-for-path"><a class="header" href="#lineto-sub-element-for-path"><code>LineTo</code> Sub-element for <code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#lineto-sub-element-for-path" title="Permalink to this heading"></a></a></h5>
<p>The <code>LineTo</code> sub-element describes a line from the path’s current position to the location specified by the <code>x</code> and <code>y</code> properties.</p>
<h6 id="properties-6"><a class="header" href="#properties-6">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id9" title="Permalink to this heading"></a></a></h6>
<ul>
<li><strong><code>x</code></strong> (<em>in</em> <em>float</em>): The target x position of the line.</li>
<li><strong><code>y</code></strong> (<em>in</em> <em>float</em>): The target y position of the line.</li>
</ul>
<h5 id="arcto-sub-element-for-path"><a class="header" href="#arcto-sub-element-for-path"><code>ArcTo</code> Sub-element for <code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#arcto-sub-element-for-path" title="Permalink to this heading"></a></a></h5>
<p>The <code>ArcTo</code> sub-element describes the portion of an ellipse. The arc is drawn from the path’s current position to the location specified by the <code>x</code> and <code>y</code> properties. The remaining properties are modelled after the SVG specification and allow tuning visual features such as the direction or angle.</p>
<h6 id="properties-7"><a class="header" href="#properties-7">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id10" title="Permalink to this heading"></a></a></h6>
<ul>
<li><strong><code>large-arc</code></strong> (<em>in</em> <em>bool</em>): Out of the two arcs of a closed ellipse, this flag selects that the larger arc is to be rendered. If the property is <code>false</code>, the shorter arc is rendered instead.</li>
<li><strong><code>radius-x</code></strong> (<em>in</em> <em>float</em>): The x-radius of the ellipse.</li>
<li><strong><code>radius-y</code></strong> (<em>in</em> <em>float</em>): The y-radius of the ellipse.</li>
<li><strong><code>sweep</code></strong> (<em>in</em> <em>bool</em>): If the property is <code>true</code>, the arc will be drawn as a clockwise turning arc; anti-clockwise otherwise.</li>
<li><strong><code>x-rotation</code></strong> (<em>in</em> <em>float</em>): The x-axis of the ellipse will be rotated by the value of this properties, specified in as angle in degrees from 0 to 360.</li>
<li><strong><code>x</code></strong> (<em>in</em> <em>float</em>): The target x position of the line.</li>
<li><strong><code>y</code></strong> (<em>in</em> <em>float</em>): The target y position of the line.</li>
</ul>
<h5 id="cubicto-sub-element-for-path"><a class="header" href="#cubicto-sub-element-for-path"><code>CubicTo</code> Sub-element for <code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#cubicto-sub-element-for-path" title="Permalink to this heading"></a></a></h5>
<p>The <code>CubicTo</code> sub-element describes a smooth Bézier from the path’s current position to the location specified by the <code>x</code> and <code>y</code> properties, using two control points specified by their respective properties.</p>
<h6 id="properties-8"><a class="header" href="#properties-8">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id11" title="Permalink to this heading"></a></a></h6>
<ul>
<li><strong><code>control-1-x</code></strong> (<em>in</em> <em>float</em>): The x coordinate of the curve’s first control point.</li>
<li><strong><code>control-1-y</code></strong> (<em>in</em> <em>float</em>): The y coordinate of the curve’s first control point.</li>
<li><strong><code>control-2-x</code></strong> (<em>in</em> <em>float</em>): The x coordinate of the curve’s second control point.</li>
<li><strong><code>control-2-y</code></strong> (<em>in</em> <em>float</em>): The y coordinate of the curve’s second control point.</li>
<li><strong><code>x</code></strong> (<em>in</em> <em>float</em>): The target x position of the curve.</li>
<li><strong><code>y</code></strong> (<em>in</em> <em>float</em>): The target y position of the curve.</li>
</ul>
<h5 id="quadraticto-sub-element-for-path"><a class="header" href="#quadraticto-sub-element-for-path"><code>QuadraticTo</code> Sub-element for <code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#quadraticto-sub-element-for-path" title="Permalink to this heading"></a></a></h5>
<p>The <code>QuadraticTo</code> sub-element describes a smooth Bézier from the path’s current position to the location specified by the <code>x</code> and <code>y</code> properties, using the control points specified by the <code>control-x</code> and <code>control-y</code> properties.</p>
<h6 id="properties-9"><a class="header" href="#properties-9">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id12" title="Permalink to this heading"></a></a></h6>
<ul>
<li><strong><code>control-x</code></strong> (<em>in</em> <em>float</em>): The x coordinate of the curve’s control point.</li>
<li><strong><code>control-y</code></strong> (<em>in</em> <em>float</em>): The y coordinate of the curve’s control point.</li>
<li><strong><code>x</code></strong> (<em>in</em> <em>float</em>): The target x position of the curve.</li>
<li><strong><code>y</code></strong> (<em>in</em> <em>float</em>): The target y position of the curve.</li>
</ul>
<h5 id="close-sub-element-for-path"><a class="header" href="#close-sub-element-for-path"><code>Close</code> Sub-element for <code>Path</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#close-sub-element-for-path" title="Permalink to this heading"></a></a></h5>
<p>The <code>Close</code> element closes the current sub-path and draws a straight line from the current position to the beginning of the path.</p>
<h2 id="popupwindow"><a class="header" href="#popupwindow"><code>PopupWindow</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#popupwindow" title="Permalink to this heading"></a></a></h2>
<p>Use this element to show a popup window like a tooltip or a popup menu.</p>
<p>Note: It isn’t allowed to access properties of elements within the popup from outside of the <code>PopupWindow</code>.</p>
<h3 id="functions-1"><a class="header" href="#functions-1">Functions<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id13" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>show()</code></strong>  Show the popup on the screen.</li>
</ul>
<h3 id="example-4"><a class="header" href="#example-4">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id14" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 100px;
    height: 100px;

    popup := PopupWindow {
        Rectangle { height:100%; width: 100%; background: yellow; }
        x: 20px; y: 20px; height: 50px; width: 50px;
    }

    TouchArea {
        height:100%; width: 100%;
        clicked =&gt; { popup.show(); }
    }
}
</code></pre>
<h2 id="rectangle"><a class="header" href="#rectangle"><code>Rectangle</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#rectangle" title="Permalink to this heading"></a></a></h2>
<p>By default, a <code>Rectangle</code> is just an empty item that shows nothing. By setting a color or configuring a border, it’s then possible to draw a rectangle on the screen.</p>
<p>When not part of a layout, its width and height default to 100% of the parent element.</p>
<h3 id="properties-10"><a class="header" href="#properties-10">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id15" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>background</code></strong> (<em>in</em> <em>brush</em>): The background brush of this <code>Rectangle</code>, typically a color. (default value: <code>transparent</code>)</li>
<li><strong><code>border-color</code></strong> (<em>in</em> <em>brush</em>): The color of the border. (default value: <code>transparent</code>)</li>
<li><strong><code>border-radius</code></strong> (<em>in</em> <em>length</em>): The size of the radius. (default value: 0)</li>
<li><strong><code>border-width</code></strong> (<em>in</em> <em>length</em>): The width of the border. (default value: 0)</li>
<li><strong><code>clip</code></strong> (<em>in</em> <em>bool</em>): By default, when an element is bigger or outside another element, it’s still shown. When this property is set to <code>true</code>, the children of this <code>Rectangle</code> are clipped to the border of the rectangle. (default value: <code>false</code>)</li>
</ul>
<h3 id="example-5"><a class="header" href="#example-5">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id16" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 270px;
    height: 100px;

    Rectangle {
        x: 10px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: blue;
    }

    // Rectangle with a border
    Rectangle {
        x: 70px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: green;
        border-width: 2px;
        border-color: red;
    }

    // Transparent Rectangle with a border and a radius
    Rectangle {
        x: 140px;
        y: 10px;
        width: 50px;
        height: 50px;
        border-width: 4px;
        border-color: black;
        border-radius: 10px;
    }

    // A radius of width/2 makes it a circle
    Rectangle {
        x: 210px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: yellow;
        border-width: 2px;
        border-color: blue;
        border-radius: self.width/2;
    }
}
</code></pre>
<h2 id="textinput"><a class="header" href="#textinput"><code>TextInput</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#textinput" title="Permalink to this heading"></a></a></h2>
<p>The <code>TextInput</code> is a lower-level item that shows text and allows entering text.</p>
<p>When not part of a layout, its width or height defaults to 100% of the parent element when not specified.</p>
<h3 id="properties-11"><a class="header" href="#properties-11">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id17" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>color</code></strong> (<em>in</em> <em>brush</em>): The color of the text (default value: depends on the style)</li>
<li><strong><code>font-family</code></strong> (<em>in</em> <em>string</em>): The name of the font family selected for rendering the text.</li>
<li><strong><code>font-size</code></strong> (<em>in</em> <em>length</em>): The font size of the text.</li>
<li><strong><code>font-weight</code></strong> (<em>in</em> <em>int</em>): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.</li>
<li><strong><code>has-focus</code></strong> (<em>out</em> <em>bool</em>): <code>TextInput</code> sets this to <code>true</code> when it’s focused. Only then it receives <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent"><code>KeyEvent</code></a>s.</li>
<li><strong><code>horizontal-alignment</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#texthorizontalalignment"><code>TextHorizontalAlignment</code></a></em>): The horizontal alignment of the text.</li>
<li><strong><code>input-type</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#inputtype"><code>InputType</code></a></em>): Use this to configure <code>TextInput</code> for editing special input, such as password fields. (default value: <code>text</code>)</li>
<li><strong><code>letter-spacing</code></strong> (<em>in</em> <em>length</em>): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)</li>
<li><strong><code>read-only</code></strong> (<em>in</em> <em>bool</em>): When set to <code>true</code>, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programatically. (default value: <code>false</code>)</li>
<li><strong><code>selection-background-color</code></strong> (<em>in</em> <em>color</em>): The background color of the selection.</li>
<li><strong><code>selection-foreground-color</code></strong> (<em>in</em> <em>color</em>): The foreground color of the selection.</li>
<li><strong><code>single-line</code></strong> (<em>in</em> <em>bool</em>): When set to <code>true</code>, the text is always rendered as a single line, regardless of new line separators in the text. (default value: <code>true</code>)</li>
<li><strong><code>text-cursor-width</code></strong> (<em>in</em> <em>length</em>): The width of the text cursor. (default value: provided at run-time by the selected widget style)</li>
<li><strong><code>text</code></strong> (<em>in-out</em> <em>string</em>): The text rendered and editable by the user.</li>
<li><strong><code>vertical-alignment</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textverticalalignment"><code>TextVerticalAlignment</code></a></em>): The vertical alignment of the text.</li>
<li><strong><code>wrap</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textwrap"><code>TextWrap</code></a></em>): The way the text input wraps. Only makes sense when <code>single-line</code> is false. (default value: no-wrap)</li>
</ul>
<h3 id="functions-2"><a class="header" href="#functions-2">Functions<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id18" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>focus()</code></strong>  Call this function to focus the text input and make it receive future keyboard events.</li>
</ul>
<h3 id="callbacks-1"><a class="header" href="#callbacks-1">Callbacks<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id19" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>accepted()</code></strong> : Invoked when enter key is pressed.</li>
<li><strong><code>cursor-position-changed(</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#point"><em><code>Point</code></em></a><code>)</code></strong> : The cursor was moved to the new (x, y) position.</li>
<li><strong><code>edited()</code></strong> : Invoked when the text has changed because the user modified it.</li>
</ul>
<h3 id="example-6"><a class="header" href="#example-6">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id20" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 270px;
    height: 100px;

    TextInput {
        text: &quot;Replace me with a name&quot;;
    }
}
</code></pre>
<h2 id="text"><a class="header" href="#text"><code>Text</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#text" title="Permalink to this heading"></a></a></h2>
<p>The <code>Text</code> element is responsible for rendering text. Besides the <code>text</code> property, that specifies which text to render, it also allows configuring different visual aspects through the <code>font-family</code>, <code>font-size</code>, <code>font-weight</code> and <code>color</code> properties.</p>
<p>The <code>Text</code> element can break long text into multiple lines of text. A line feed character (<code>\n</code>) in the string of the <code>text</code> property will trigger a manual line break. For automatic line breaking you need to set the <code>wrap</code> property to a value other than <code>no-wrap</code>, and it’s important to specify a <code>width</code> and <code>height</code> for the <code>Text</code> element, in order to know where to break. It’s recommended to place the <code>Text</code> element in a layout and let it set the <code>width</code> and <code>height</code> based on the available screen space and the text itself.</p>
<h3 id="properties-12"><a class="header" href="#properties-12">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id21" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>color</code></strong> (<em>in</em> <em>brush</em>): The color of the text. (default value: depends on the style)</li>
<li><strong><code>font-family</code></strong> (<em>in</em> <em>string</em>): The name of the font family selected for rendering the text.</li>
<li><strong><code>font-size</code></strong> (<em>in</em> <em>length</em>): The font size of the text.</li>
<li><strong><code>font-weight</code></strong> (<em>in</em> <em>int</em>): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.</li>
<li><strong><code>horizontal-alignment</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#texthorizontalalignment"><code>TextHorizontalAlignment</code></a></em>): The horizontal alignment of the text.</li>
<li><strong><code>letter-spacing</code></strong> (<em>in</em> <em>length</em>): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)</li>
<li><strong><code>overflow</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textoverflow"><code>TextOverflow</code></a></em>): What happens when the text overflows (default value: clip).</li>
<li><strong><code>text</code></strong> (<em>in</em> <em><a href="https://slint.dev/releases/1.0.0/docs/slint/src/reference/types.html#strings">string</a></em>): The text rendered.</li>
<li><strong><code>vertical-alignment</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textverticalalignment"><code>TextVerticalAlignment</code></a></em>): The vertical alignment of the text.</li>
<li><strong><code>wrap</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textwrap"><code>TextWrap</code></a></em>): The way the text wraps (default value: <code>no-wrap</code>).</li>
</ul>
<h3 id="example-7"><a class="header" href="#example-7">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id22" title="Permalink to this heading"></a></a></h3>
<p>This example shows the text “Hello World” in red, using the default font:</p>
<pre><code>export component Example inherits Window {
    width: 270px;
    height: 100px;

    Text {
        x:0;y:0;
        text: &quot;Hello World&quot;;
        color: red;
    }
}
</code></pre>
<p>This example breaks a longer paragraph of text into multiple lines, by setting a <code>wrap</code> policy and assigning a limited <code>width</code> and enough <code>height</code> for the text to flow down:</p>
<pre><code>export component Example inherits Window {
    width: 270px;
    height: 300px;

    Text {
        x:0;
        text: &quot;This paragraph breaks into multiple lines of text&quot;;
        wrap: word-wrap;
        width: 150px;
        height: 100%;
    }
}
</code></pre>
<h2 id="toucharea"><a class="header" href="#toucharea"><code>TouchArea</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#toucharea" title="Permalink to this heading"></a></a></h2>
<p>Use <code>TouchArea</code> to control what happens when the region it covers is touched or interacted with using the mouse.</p>
<p>When not part of a layout, its width or height default to 100% of the parent element.</p>
<h3 id="properties-13"><a class="header" href="#properties-13">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id23" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>has-hover</code></strong> (<em>out</em> <em>bool</em>): <code>TouchArea</code> sets this to <code>true</code> when the mouse is over it.</li>
<li><strong><code>mouse-cursor</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#mousecursor"><code>MouseCursor</code></a></em>): The mouse cursor type when the mouse is hovering the <code>TouchArea</code>.</li>
<li><strong><code>mouse-x</code></strong>, <strong><code>mouse-y</code></strong> (<em>out</em> <em>length</em>): Set by the <code>TouchArea</code> to the position of the mouse within it.</li>
<li><strong><code>pressed-x</code></strong>, <strong><code>pressed-y</code></strong> (<em>out</em> <em>length</em>): Set by the <code>TouchArea</code> to the position of the mouse at the moment it was last pressed.</li>
<li><strong><code>pressed</code></strong> (<em>out</em> <em>bool</em>): Set to <code>true</code> by the <code>TouchArea</code> when the mouse is pressed over it.</li>
</ul>
<h3 id="callbacks-2"><a class="header" href="#callbacks-2">Callbacks<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id24" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>clicked()</code></strong> : Invoked when clicked: The mouse is pressed, then released on this element.</li>
<li><strong><code>moved()</code></strong> : The mouse has been moved. This will only be called if the mouse is also pressed.</li>
<li><strong><code>pointer-event(</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#pointerevent"><em><code>PointerEvent</code></em></a><code>)</code></strong> : Invoked when a button was pressed or released.</li>
</ul>
<h3 id="example-8"><a class="header" href="#example-8">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id25" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Example inherits Window {
    width: 200px;
    height: 100px;
    area := TouchArea {
        width: parent.width;
        height: parent.height;
        clicked =&gt; {
            rect2.background = #ff0;
        }
    }
    Rectangle {
        x:0;
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }
    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}
</code></pre>
<h2 id="verticallayout-and-horizontallayout"><a class="header" href="#verticallayout-and-horizontallayout"><code>VerticalLayout</code> and <code>HorizontalLayout</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#verticallayout-and-horizontallayout" title="Permalink to this heading"></a></a></h2>
<p>These layouts place their children next to each other vertically or horizontally. The size of elements can either be fixed with the <code>width</code> or <code>height</code> property, or if they aren’t set they will be computed by the layout respecting the minimum and maximum sizes and the stretch factor.</p>
<h3 id="properties-14"><a class="header" href="#properties-14">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id26" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>spacing</code></strong> (<em>in</em> <em>length</em>): The distance between the elements in the layout.</li>
<li><strong><code>padding</code></strong> (<em>in</em> <em>length</em>): the padding within the layout.</li>
<li><strong><code>padding-left</code></strong>, <strong><code>padding-right</code></strong>, <strong><code>padding-top</code></strong> and <strong><code>padding-bottom</code></strong> (<em>in</em> <em>length</em>): Set these properties to override the padding on specific sides.</li>
<li><strong><code>alignment</code></strong> (<em>in</em> <em>enum <a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#layoutalignment"><code>LayoutAlignment</code></a></em>): Set the alignment. Matches the CSS flex box.</li>
</ul>
<h3 id="example-9"><a class="header" href="#example-9">Example<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id27" title="Permalink to this heading"></a></a></h3>
<pre><code>export component Foo inherits Window {
    width: 200px;
    height: 100px;
    HorizontalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; min-width: 10px; }
        Rectangle { background: yellow; horizontal-stretch: 1; }
        Rectangle { background: green; horizontal-stretch: 2; }
    }
}
</code></pre>
<h2 id="window"><a class="header" href="#window"><code>Window</code><a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#window" title="Permalink to this heading"></a></a></h2>
<p><code>Window</code> is the root of the tree of elements that are visible on the screen.</p>
<p>The <code>Window</code> geometry will be restricted by its layout constraints: Setting the <code>width</code> will result in a fixed width, and the window manager will respect the <code>min-width</code> and <code>max-width</code> so the window can’t be resized bigger or smaller. The initial width can be controlled with the <code>preferred-width</code> property. The same applies to the <code>Window</code>s height.</p>
<h3 id="properties-15"><a class="header" href="#properties-15">Properties<a href="https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id28" title="Permalink to this heading"></a></a></h3>
<ul>
<li><strong><code>background</code></strong> (<em>in</em> <em>brush</em>): The background brush of the <code>Window</code>. (default value: depends on the style)</li>
<li><strong><code>default-font-family</code></strong> (<em>in</em> <em>string</em>): The font family to use as default in text elements inside this window, that don’t have their <code>font-family</code> property set.</li>
<li><strong><code>default-font-size</code></strong> (<em>in-out</em> <em>length</em>): The font size to use as default in text elements inside this window, that don’t have their <code>font-size</code> property set. The value of this property also forms the basis for relative font sizes.</li>
<li><strong><code>default-font-weight</code></strong> (<em>in</em> <em>int</em>): The font weight to use as default in text elements inside this window, that don’t have their <code>font-weight</code> property set. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.</li>
<li><strong><code>icon</code></strong> (<em>in</em> <em>image</em>): The window icon shown in the title bar or the task bar on window managers supporting it.</li>
<li><strong><code>no-frame</code></strong> (<em>in</em> <em>bool</em>): Whether the window should be borderless/frameless or not.</li>
<li><strong><code>title</code></strong> (<em>in</em> <em>string</em>): The window title that is shown in the title bar.</li>
</ul>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                            <a rel="prev" href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>

                            <a rel="next" href="../../posts/rust/corporate_network_install_rust_on_windows.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                    <a rel="prev" href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>

                    <a rel="next" href="../../posts/rust/corporate_network_install_rust_on_windows.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
            </nav>

        </div>



        <script>
            window.playground_line_numbers = true;
        </script>

        <script>
            window.playground_copyable = true;
        </script>

        <script src="../../ace.js"></script>
        <script src="../../editor.js"></script>
        <script src="../../mode-rust.js"></script>
        <script src="../../theme-dawn.js"></script>
        <script src="../../theme-tomorrow_night.js"></script>

        <script src="../../elasticlunr.min.js"></script>
        <script src="../../mark.min.js"></script>
        <script src="../../searcher.js"></script>

        <script src="../../clipboard.min.js"></script>
        <script src="../../highlight.js"></script>
        <script src="../../book.js"></script>

        <!-- Custom JS scripts -->
        <script src="../../src/js/custom.js"></script>


    </div>
    </body>
</html>
